<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
</head>
<body>
	<script>
		var data = {name: 'kindeng'};
		observe(data);
		data.name = 'dmq'; // 哈哈哈，监听到值变化了 kindeng --> dmq

		function observe(data) {
		    if (!data || typeof data !== 'object') {
		        return;
		    }
		    // 取出所有属性遍历
		    Object.keys(data).forEach(function(key) {
		        defineReactive(data, key, data[key]);
		    });
		};

		function defineReactive(data, key, val) {
		    observe(val); // 监听子属性
		    Object.defineProperty(data, key, {
		        enumerable: true, // 可枚举
		        configurable: false, // 不能再define
		        // value:231,
		        get: function() {
		            return val;
		        },
		        set: function(newVal) {
		            console.log('哈哈哈，监听到值变化了 ', val, ' --> ', newVal);
		            this.value = 1213123
		            val = newVal;
		            return 123
		        }
		    });
		}

		console.log(data)
		setTimeout(function(){
			data.name = "马俊杰"
			console.log(data)
		},5000)
	</script>
</body>
</html>